import { listMychartVoByPageUsingPost } from '@/services/qingbi/chartController';
import { useModel } from '@@/exports';
import { Avatar, List, message, Result } from 'antd';
import { Card } from 'antd-mobile-alita';
import Search from 'antd/es/input/Search';
import ReactECharts from 'echarts-for-react';
import { useEffect, useState } from 'react';

/**
 * 添加图表页面
 * @constructor
 */
const MyChart: React.FC = () => {
  const initSearchParams = {
    // 一页12条数据
    current: 1,
    pageSize: 6,
  };

  const [searchParam, setSearchParams] = useState<API.ChartQueryRequest>({ ...initSearchParams });
  const [chartList, setChartList] = useState<API.Chart[]>();
  // const [initialState, setInitialState] = getInitialState();
  // 这是是获取全局变量的语法 记住
  const { initialState } = useModel('@@initialState');

  const { currentUser } = initialState ?? {};
  console.log(currentUser);
  const [total, setTotal] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(false);

  // 先执行方法获取数据
  const loadData = async () => {
    try {
      const res = await listMychartVoByPageUsingPost(searchParam);
      setLoading(true);
      if (res.data) {
        setChartList(res.data.records ?? []);
        setTotal(res.data.total ?? 0);
        // 隐藏图标的title
        if (res.data.records) {
          // 写一个循环
          res.data.records.forEach((record) => {
            const chartOption = JSON.parse(record.genChart ?? '{}');
            chartOption.title = undefined;
            record.genChart = JSON.stringify(chartOption);
          });
        }
      } else {
        message.error('获取我的图标失败');
      }
    } catch (e: any) {
      message.error('获取我的失败' + e.message);
    }
    setLoading(false);
  };

  // 首次渲染那  且改变
  useEffect(() => {
    loadData();
  }, [searchParam]);

  return (
    <div className="my-chart">
      <div>
        <Search
          placeholder="请输入关键词"
          onSearch={(value) => {
            // console.log(value);
            setSearchParams({
              ...initSearchParams,
              name: value,
            });
          }}
          // style={{ width: 800 }}
          enterButton
        />
      </div>
      ,{/*数据列表：*/}
      {/*{JSON.stringify(chartList)}*/}
      {/*<br />*/}
      <List
        grid={{
          gutter: 16,
          xs: 1,
          sm: 1,
          md: 1,
          lg: 2,
          xl: 2,
        }}
        itemLayout="vertical"
        size="large"
        // pagination={{
        //   onChange: (page) => {
        //     console.log(page);
        //   },
        //   pageSize: 4,
        // }}
        pagination={{
          onChange: (page, pageSize) => {
            // console.log(page);
            setSearchParams({
              ...searchParam,
              current: page,
              pageSize,
            });
          },
          current: searchParam.current,
          pageSize: searchParam.pageSize,
          total: total,
        }}
        // 这里改成我们自己图表的数据
        loading={loading}
        dataSource={chartList}
        renderItem={(item) => (
          <Card>
            <List.Item
              // 这里就是你要怎么展示每一条数据
              key={item.id}
              // extra={
              //   <img
              //     width={272}
              //     alt="logo"
              //     src="http://tuchuang.qingfengzyllnn.top/tupian/preview.jpg"
              //   />
              // }
            >
              <List.Item.Meta
                // avatar={<Avatar src={'http://tuchuang.qingfengzyllnn.top/tupian/preview.jpg'} />}
                avatar={<Avatar src={currentUser ? currentUser.userAvatar : ''} />}
                // title={<a href={item.href}>{item.title}</a>}
                title={item.name}
                description={item.chartType ? '图表类型:' + item.chartType : undefined}
              />

              <>
                {
                  // 当状态（item.status）为'wait'时，显示待生成的结果组件
                  item.status === 'wait' && (
                    <>
                      <Result
                        // 状态为警告
                        status="warning"
                        title="待生成"
                        // 子标题显示执行消息，如果执行消息为空，则显示'当前图表生成队列繁忙，请耐心等候'
                        subTitle={item.execMessage ?? '当前图表生成队列繁忙，请耐心等候'}
                      />
                    </>
                  )
                }
                {
                  // 当状态（item.status）为'wait'时，显示待生成的结果组件
                  item.status === 'failed' && (
                    <>
                      <Result
                        // 状态为警告
                        status="error"
                        title="图表生成失败"
                        // 子标题显示执行消息，如果执行消息为空，则显示'当前图表生成队列繁忙，请耐心等候'
                        subTitle={item.execMessage}
                      />
                    </>
                  )
                }
                {
                  // 当状态（item.status）为'wait'时，显示待生成的结果组件
                  item.status === 'running' && (
                    <>
                      <Result
                        // 状态为警告
                        status="info"
                        title="图表正在生成"
                        // 子标题显示执行消息，如果执行消息为空，则显示'当前图表生成队列繁忙，请耐心等候'
                        subTitle={item.execMessage}
                      />
                    </>
                  )
                }
                {
                  // 当状态（item.status）为'wait'时，显示待生成的结果组件
                  item.status === 'succeed' && (
                    <>
                      <div style={{ marginBottom: 16 }} />
                      <p> {'分析目标: ' + item.goal}</p>
                      <div style={{ marginBottom: 16 }} />
                      <ReactECharts option={JSON.parse(item.genChart) ?? '{}'} />
                    </>
                  )
                }
              </>
            </List.Item>
          </Card>
        )}
      />
      总数:{total}
    </div>
  );
};

export default MyChart;
